<template>
	<view class="container">
		<u-form :model="form" ref="form" label-width="180" disabled="true">
			<view v-if="item.zt==2">
				<u-button 
				type="primary"
				plain
				size="medium"
				disabled="true"
				>已审批
				</u-button>
			</view>
			<u-form-item label="客户姓名:" prop="contact" required ><u-input v-model="form.contact" disabled="true"></u-input></u-form-item>
			<u-form-item label="手机号:" prop="phone" required @click="phoneNumber" ><u-input v-model="form.phone" disabled="true"></u-input></u-form-item>
			<!-- <u-form-item label="客户编码:" prop="customerNo"><u-input v-model="form.customerNo"></u-input></u-form-item> -->
			<u-form-item label="预约日期:" prop="bookDate" required v-bind:disabled="this.controllShow">
				<u-input v-model="form.bookDate" :clearable="this.controllShow" type="select" disabled="true" @click="dutyTimePickerVisible = true" />
				<u-picker
				disabled="true"
					mode="time"
					v-model="dutyTimePickerVisible"
					:params="{
						year: true,
						month: true,
						day: true
					}"
					@confirm="dutyTimePickerChange"
				></u-picker>
			</u-form-item>
			<!-- <u-form-item label="预约时间段:" prop="dutyTime2" required v-bind:disabled="this.controllShow">
				<u-input v-model="showForm.dutyTime2Show" type="select" @click="dutyTime2PickerVisible = true"></u-input>
				<u-select v-model="dutyTime2PickerVisible" :list="bookTimeRangeDict" @confirm="dutyTime2Confirm"></u-select>
			</u-form-item> -->
			<u-form-item label="是否到货:" prop="goodsType" required disabled="true">
				<u-radio-group v-model="form.goodsType" disabled="true" @change="whetherChange">
					<u-radio 
						@change="wheChange" 
						v-for="(item, index) in goodsTypeList" :key="item.key" 
						:name="item.key"
						:disabled="item.disabled"
					>
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			
			<u-form-item label="安装地址:" prop="province" required >
				<!-- <city-picker class="picker" :value="form.province" text-align="left" @city-change="cityChange">
				</city-picker> -->
				<u-input v-model="form.province" disabled="true"></u-input>
			</u-form-item>
			<u-form-item label="详细地址:" prop="address" required >
				<u-input disabled="true" v-model="form.address" placeholder="县区/街道/门牌号"></u-input>
			</u-form-item>
			<u-form-item label="购买型号:" prop="buyType" required >
				<u-input v-model="form.buyType" disabled="true"></u-input>
			</u-form-item>
			<u-form-item label="安装数量:" prop="buyNum" required >
				<u-number-box v-model="form.buyNum" disabled="true"></u-number-box>
			</u-form-item>
			<u-form-item label="安装类型:" prop="payType" required >
				<u-radio-group disabled="true" v-model="form.payType" @change="radioGroupChange">
									<u-radio  
										@change="radioChange" 
										v-for="(item, index) in payTypeDict" :key="item.key" 
										:name="item.key"
										:disabled="item.disabled"
									>{{item.name}}</u-radio>
				</u-radio-group>					
				
			</u-form-item>
			<u-form-item label="服务金额:" prop="standardFee" >
				<u-input v-model="form.standardFee" disabled="true"></u-input>
			</u-form-item>
			<u-form-item label="附加金额:" prop="adjustmentFee" >
				<u-input v-model="form.adjustmentFee" disabled="true"></u-input>
			</u-form-item>
			<!-- <u-form-item label="机身码:" prop="mcuId"><u-input v-model="form.mcuId"></u-input></u-form-item> -->
			<u-form-item  label="备注:" label-width="130" prop="remark" >
				<u-input v-model="form.remark" disabled="true"
				placeholder="已发货锁体、特殊配件、或故障描述"
				></u-input>
			</u-form-item>
			<u-form-item label="图片或视频:" v-bind:disabled="this.controllShow" >
				<view class="imgPhoto">
					<view  v-for="(item,index) in form.photo" :key="index">
							<img :src="item"
							style="width: 120rpx;height: 120rpx;"></img>
					</view> 
				</view>
				<!-- <u-upload
				v-model="form.photo"
					ref="uUpload1"
					:action="'/'"
					width="120"
					height="120"
					max-count="5"
					upload-text=" "
					:file-list="fileList"
					:auto-upload="false"
					@on-list-change="fileListChange"
				></u-upload> -->
				<u-input disabled="true" type="textarea" placeholder="门照片(正面/侧面-衬板/门照片-侧面)或故障视频/安装服务说明资料"
				></u-input>
			</u-form-item>
			<!-- 新加这里 -->
			<u-form-item label="本单金额:"  prop="totalFee">
				<u-input v-model="form.totalFee" disabled="true"/>
			</u-form-item>
			<!-- <u-form-item label="预充值金额(余额):" prop="confirmPrice">
				<u-input v-model="form.confirmPrice" v-bind:disabled="this.controllShow" />
			</u-form-item> -->
			<!-- <u-form-item label="安装服务说明资料:" prop="record" v-bind:disabled="this.controllShow">
				<u-input v-model="form.record"></u-input>
			</u-form-item> -->
			
		</u-form>
		
	</view>
</template>

<script>
import { _bookTimeRangeDict,_payTypeDict } from '@/utils/dict.js';
import CityPicker from '@/components/city-picker/city-picker.vue';
import { getOrderItemDetail,appointPicOrderApiUrl,_appointPrePrice, } from '../../api/agent.js';
import baseUrl from '../../config/url.js';
import { mapActions } from 'vuex';

let bookTimeRangeDict = Object.keys(_bookTimeRangeDict).map(key => {
	return {
		label: _bookTimeRangeDict[key],
		value: key
	};
});
export default {
	components: {
		CityPicker,
	},
	data() {
		return {
			controllShow:true,
			form: {
				photo:[],
				orderNumber:'',
				// v-show 显示
				device:'',
				id:'',
				zt: '',
				No:'chenjianen',
				oldprice: '',
				contact: '',
				phone: '',
				bookDate: '',
				dutyTime2: '',
				// smc: '',
				address: '',
				mcuId: '',
				buyType: '',
				standardFee:0,
				adjustmentFee:0,
				remark:'',
				customerNo: '',
				orderNo: '',
				buyNum:1,
				// goodsType:"",
				totalFee:0,
				confirmPrice:0,
				record:"",
				disable:'',
				smc:'',
				province:'',
				city:'',
				district:'',
				
			},
			goodsTypeList:[
				{
					key:'1',
					name: '是',
					disabled: false
				},
				{
					key:'2',
					name: '否',
					disabled: false
				},
				
			],
			// 预充值金额
			appointPrePrice: '',
			payTypeDict:_payTypeDict,
			fileList: [],
			showForm: {
				dutyTime2Show: ''
			},
			rules: {
				contact: [{ required: true, message: '请输入客户姓名', trigger: 'blur' }],
				phone: [{ required: true,pattern: /^1[3456789]\d{9}$/, message: '请输入客户11位手机号', trigger: 'blur' }],
				bookDate: [{ required: true, message: '请选择预约日期', trigger: 'change' }],    
				// dutyTime2: [{ required: true, message: '请选择预约时间段', trigger: 'change' }],
				// goodsType: [{ required: true, message: '请选择是否到货', trigger: 'change' }],
				// smc: [{ required: true, message: '请选择省市区', trigger: 'change' }],
				address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
				buyType: [{ required: true, message: '请输入购买型号', trigger: 'blur' }],
				// payType: [{ required: true, message: '安装类型', trigger: 'change' }],
			},
			dutyTimePickerVisible: false,
			bookTimeRangeDict,
			dutyTime2PickerVisible: false
		};
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
		// this.form.customerNo = this.$store.state.user.userInfo.teamNo;
		this.form.No = this.$store.state.user.userInfo.No;
	},
	// 拿ID判断 暂存提交状态
	onLoad(options){
			this.queryDetailById(options.orderNumber);
	},
	created() {
		this.getMoney();
	},
	methods: {
		...mapActions({
			saveAppointOrder: 'agent/saveAppointOrder'
		}),
		// 拿id
		queryDetailById(orderNumber){
			getOrderItemDetail(orderNumber).then(response=>{
				this.form=response.data;
				// this.form.photo=this.fileList
				this.form.province=this.form.province+this.form.city+this.form.district;
				// if(this.form.zt==0){
					this.controllShow=true;
				// }else if(this.form.zt==1){
				// 	this.controllShow=true;
				// }
				var str=this.form.photo.split(";");
				this.form.photo=str;
				for (let st in str) {
					if(st<str.length-1){
						this.form.photo[st]=baseUrl+"/"+str[st]
						console.log(this.form.photo[st])
						}
					// this.form.photo[st]="http://app.aptenon.com/tmr/"+str[st]	
				}
				this.form.photo.pop();
			})
		},
		
		wheChange(e){
			// 选中安装 
		},
		whetherChange(e){
			console.log(e);
			let radio;
			this.goodsTypeList.map(item=>{
				if(item.key==e){
					radio = item;
				}
			});
			console.log(radio); 
		},
		// 选中某个单选框时，由radio时触发
		radioChange(e) {
			// console.log(e);
		},
		// 选中任一radio时，由radio-group触发 
		radioGroupChange(e) {
			console.log(e);
			let radio;
			this.payTypeDict.map(item=>{
				if(item.key==e){
					radio = item;
				}
			});
			console.log(radio);
			console.log(this.form.buyNum);
			this.form.oldprice=radio.money;
			this.form.standardFee = radio.money*this.form.buyNum;
			this.form.totalFee=parseInt(this.form.standardFee)+parseInt(this.form.adjustmentFee)
		},
		
		dutyTimePickerChange(e) {
			console.log(e);
			this.form.bookDate = `${e.year}-${e.month}-${e.day}`;
		},
		cityChange(e) {
			console.log('cityChange', e);
			this.form.province= e.label[0];
			this.form.city=e.label[1];
			this.form.district=e.label[2];
		},
		dutyTime2Confirm(e) {
			console.log(e);
			this.form.dutyTime2 = e[0].value;
			this.showForm.dutyTime2Show = e[0].label;
		},
		fileListChange(e) {
			console.log(e);
			this.fileList=e;
			console.log(e.photo);
		},
		photoChange(e){
			console.log(e.photo);
		},
		//拿预金额
		getMoney(){		
		   _appointPrePrice(this.form.No).then(response => {
		       this.form.appointPrePrice=response.data;
		      });
		},
		// 上传图片
		uploadFile(url,resForm){
		      console.info(resForm);
		      return new Promise((resolve, reject) => {
		             uni.uploadFile({
		                 url: baseUrl + appointPicOrderApiUrl,
		                 filePath: url,
		                 name: 'file',
		                  formData: {
		                        ...resForm,
		                  },
		                   success: (res) => {
		                     resolve(res)
							 console.log(res)
		                 }, 
		          });
		         });
				
		},
		
	},
};
</script>

<style lang="less">
.container {
	padding: 12rpx 64rpx 94rpx 64rpx;
	.u-delete-icon {
		width: 30rpx !important;
		height: 30rpx !important;
	}
}
.bottomOpeCon {
	height: 94rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	padding: 12rpx;
}
.imgPhoto{
	display: flex !important;
	
}




</style>
